<template>
  <!-- 企宽装机 -->
  <div>
    <div class="table-page-search-wrapper">
      <!-- 查询条件 -->
      <a-form layout="inline" class="formModel" style="padding:20px 20px 0 20px">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="时间">
              <a-range-picker v-model="timeSelect" :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :md="1" :sm="24">
            <a-button type="primary" @click="selectEvent">查询</a-button>
          </a-col>
          <!-- <a-col :md="2" :sm="24">
            <a-button @click="download" type="primary" icon="export">excel导出</a-button>
          </a-col> -->
        </a-row>
      </a-form>
    </div>
    <!-- 表格 -->
    <a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="tableLoading" bordered size="middle" style="width:100%;padding:5px 15px">
      <template slot="type1" slot-scope="text, record">
        <a style="color:black" @click="clickEvent(record,'')">{{text}}</a>
      </template>
      <template slot="type2" slot-scope="text, record">
        <a style="color:black" @click="clickEvent(record,1)">{{text}}</a>
      </template>
      <template slot="type3" slot-scope="text, record">
        <a style="color:black" @click="mydclickEvent(record,'')">{{text}}</a>
      </template>
      <template slot="type4" slot-scope="text, record">
        <a style="color:black" @click="mydclickEvent(record,2)">{{text}}</a>
      </template>
    </a-table>
     <!-- <装机及时率详情> -->
    <InstallEquipmentDetail v-if="showPage"  @cancelEvent="cancelEvent" :info="info"></InstallEquipmentDetail>
     <!-- <装机满意度详情> -->
    <InstallEquipmentSatisfiedDetail v-if="ckshowPage"  @cancelEvent="cancelEvent" :info="info"></InstallEquipmentSatisfiedDetail>
  </div>
</template>

<script>
import { getQkInstallGrid, exportExcelQkInstallsExport } from '@/api/qkApi'
import InstallEquipmentDetail from '@/views/analysisManage/enterpriseWide/detailModel/installEquipmentDetail'
import InstallEquipmentSatisfiedDetail from '@/views/analysisManage/enterpriseWide/detailModel/installEquipmentSatisfiedDetail'
import moment from 'moment'
export default {
  components: {InstallEquipmentDetail,InstallEquipmentSatisfiedDetail},
  data() {
    return {
      info:{},
      showPage:false,
      ckshowPage:false,
      dataSource: [],
      tableLoading: false,
      columns,
      timeSelect: '',
      queryParam: {},
    }
  },
  created() {
    this.timeSelect = [moment().subtract(7, 'days'), moment()]
    this.queryParam.startTime = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.queryParam.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.getDataInfo()
  
  },
  methods: {
    moment,
    //键盘监听
    handleKeyDown(e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      if (key === 13) {
        //触发的事件
        this.selectEvent()
      }
    },
    //表格数据查询
    getDataInfo() {
      this.tableLoading = true
      getQkInstallGrid(this.queryParam).then(
        (res) => {
          res.code == 200 ? (this.dataSource = res.data) : this.$message.error(res.msg)
          this.tableLoading = false
        },
        (error) => {
          this.$message.error(error)
        }
      )
    },
    //文档导出
    download() {
      exportExcelQkInstallsExport(this.queryParam)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '企宽装机列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //时间查询
    onChange(date, dateString) {
      this.queryParam.startTime = dateString[0] + ' 00:00:00'
      this.queryParam.endTime = dateString[1] + ' 23:59:59'
    },
    //查询
    selectEvent() {
      this.getDataInfo()
    },
     clickEvent(e,type){
     this.info = e 
     this.info.startTime = this.queryParam.startTime
     this.info.endTime = this.queryParam.endTime
     this.info.type = type
     this.showPage = true
    },
    mydclickEvent(e,type){
     this.info = e 
     this.info.startTime = this.queryParam.startTime
     this.info.endTime = this.queryParam.endTime
     this.info.type = type
     this.ckshowPage = true
    },
    //取消详情弹窗
    cancelEvent(){
      this.showPage = false
      this.ckshowPage = false
    }
  },
}

const columns = [
  {
    title: '区县',
    dataIndex: 'country',
    align: 'center',
  },
  {
    title: '装机及时率（基准值/挑战值）',
    align: 'center',
    children: [
      {
        title: '竣工总量',
        dataIndex: 'totalNum',
        align: 'center',
        scopedSlots: { customRender: 'type1' },
      },
      {
        title: '超时量',
        dataIndex: 'overNum',
        align: 'center',
        scopedSlots: { customRender: 'type2' },
      },
      {
        title: '及时率',
        dataIndex: 'rate',
        align: 'center',
      },
    ],
  },
  {
    title: '装机满意度（基准值/挑战值）',
    align: 'center',
    children: [
      {
        title: '回访总量',
        dataIndex: 'replayNum',
        align: 'center',
        scopedSlots: { customRender: 'type3' },
      },
      {
        title: '不满意',
        dataIndex: 'notSatisfied',
        align: 'center',
        scopedSlots: { customRender: 'type4' },
      },
      {
        title: '满意度',
        dataIndex: 'satisfaction',
        align: 'center',
      },
    ],
  },
]
</script>

<style >
</style>
